import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/assets/assets.dart';
import 'package:pornhub_app/components/image_view.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/mine/system_avator/system_avator_page_controller.dart';

import '../../../assets/styles.dart';

class SystemAvatorPage extends GetView<SystemAvatorPageController> {
  const SystemAvatorPage({super.key});

  @override
  Widget build(BuildContext context) {
    final bgColor = Styles.color.bgColor;

    return Scaffold(
      backgroundColor: bgColor,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        iconTheme: const IconThemeData(color: Colors.white),
        title: Text("系统头像",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.w,
              fontWeight: FontWeight.w500,
            )),
        centerTitle: true,
        actions: [
          TextButton(
              onPressed: () {
                controller.uploadAvator();
              },
              child: Text(
                "保存",
                style: TextStyle(
                    color: Colors.white70,
                    fontSize: 12.w,
                    fontWeight: FontWeight.w500),
              )),
        ],
      ),
      body: _buildView(),
    );
  }

  _buildView() {
    return Column(
      children: [
        Center(
          child: Obx(
            () => ImageView(
              src: controller.systemAvator.value.isEmpty
                  ? "${controller.us.user.logo}"
                  : controller.systemAvator.value,
              width: 180.w,
              height: 180.w,
              fit: BoxFit.cover,
              borderRadius: BorderRadius.circular(100.w),
              defaultPlace: Assets.avatarplaceholer,
            ),
          ),
        ),
        SizedBox(height: 50.w),
        Expanded(
          child: GridView.builder(
              padding: EdgeInsets.symmetric(vertical: 20.w, horizontal: 9.w),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 90.w / 90.w,
                mainAxisSpacing: 7.w,
                crossAxisSpacing: 7.w,
              ),
              itemCount: controller.avatorList.length,
              itemBuilder: (context, index) {
                return _itemView(controller.avatorList[index], index);
              }),
        ),
      ],
    );
  }

  _itemView(String imgSrc, int index) {
    return Image.asset(
      imgSrc,
      width: 90.w,
      height: 90.w,
    ).onTap(() => controller.checkAvator(index));
  }
}
